<template>
    <div>
        <el-row class="wathdra_record">
            <el-col :span="24" class="leave_header_title">
                <div class="leave_title">
                    <div class="leave_left">
                        客户预约出票列表
                        &#X3000;&#X3000;
                        <el-date-picker
                                v-model="filterModel.time_interval"
                                type="daterange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                size="small"
                                format="yyyy-MM-dd"
                                :default-time="['00:00:00', '23:59:59']">
                        </el-date-picker>
                        &#X3000;
                        <el-button type="primary" size="small" @click="chooseRecord()">筛选</el-button>
                    </div>
                    <div class="leave_right defalut_excel btn_default_excel">
                        <el-button plain size="small" @click="onExportExcel()">导出Excel表格</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="reservationTime" label="预约时间"> </el-table-column>
            <el-table-column prop="enterpriseName" label="企业名称"> </el-table-column>
            <el-table-column prop="contactName" label="联系人/操作员"> </el-table-column>
            <el-table-column prop="contactInformation" label="联系方式"> </el-table-column>
        </el-table>
        <div class="right clear">
            <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onFlipOver"
                    :current-page="pagination.currentPage"
                    :page-sizes="pagination.pageSizes"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import Pagination from "@/types/Pagination";
    import moment from 'moment';

    @Component({
        methods: {
        },
        extends: Pagination
    })
    export default class Reservation extends Vue {
        activeName = 'self'
        filterModel = {
            startTime: '',
            endTime: '',
            time_interval: []
        }
        tableData = []
        // 获取预约出票列表
        async getReservatebill () {
            if (this.filterModel.time_interval == null) {
                this.filterModel.startTime = ''
                this.filterModel.endTime = ''
            } else {
                if (this.filterModel.time_interval.length == 0){
                    this.filterModel.startTime = ''
                    this.filterModel.endTime = ''
                } else {
                    this.filterModel.startTime = moment(this.filterModel.time_interval[0]).format('YYYY-MM-DD')
                    this.filterModel.endTime = moment(this.filterModel.time_interval[1]).format('YYYY-MM-DD')
                }
            }
            let sendFind = {
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
                startTime: this.filterModel.startTime,
                endTime: this.filterModel.endTime
            }
            let res = await this.$http.post('reservatebill/reservatebill/list',sendFind)
            if (res.status == 200){
                let { items, totalNum } = res.data;
                this.tableData = items;
                this.pagination.total = totalNum;
            }
        }
        chooseRecord () {
            // if (!this.filterModel.startTime){
            //     this.$alert('请选择开始时间','提示',{
            //         confirmButtonText: '确定',
            //         customClass: 'custom-message-box',
            //         callback: action => {}
            //     })
            //     return;
            // }
            // if (!this.filterModel.endTime){
            //     this.$alert('请选择结束时间','提示',{
            //         confirmButtonText: '确定',
            //         customClass: 'custom-message-box',
            //         callback: action => {}
            //     })
            //     return;
            // }
            this.getReservatebill();
        }
        onExportExcel () {
            if (this.filterModel.time_interval.length == 0){
                this.filterModel.startTime = ''
                this.filterModel.endTime = ''
            } else {
                this.filterModel.startTime = moment(this.filterModel.time_interval[0]).format('YYYY-MM-DD')
                this.filterModel.endTime = moment(this.filterModel.time_interval[1]).format('YYYY-MM-DD')
            }
            window.open(`${window.location.origin}/boms/reservatebill/reservatebill/export?startTime=${this.filterModel.startTime}&endTime=${this.filterModel.endTime}`)
        }
        loadDataForPagination() {
            this.getReservatebill()
        }
        mounted () {
            this.getReservatebill();
        }
    }
</script>

<!--<style lang="scss">-->
    <!--.defalut_excel {-->
        <!--.el-button {-->
            <!--border: 1px solid $__color-primary;-->
            <!--border-color: $__color-primary;-->
            <!--color: $__color-primary;-->
        <!--}-->
    <!--}-->
<!--</style>-->